import type { RedisClient } from "@linksaas-minapp/redis-proxy-api"
import { Button, Card, Form, Input, List, Modal, message } from "antd"
import { useState, useEffect } from "react"

export interface SetValueProps {
    client: RedisClient;
    curKey: string;
}

function SetValue(props: SetValueProps) {
    const [valueList, setValueList] = useState<string[]>([]);
    const [showAddModal, setShowAddModal] = useState(false);
    const [newValue, setNewValue] = useState("");

    const loadData = async () => {
        const res = await props.client.setCommand().smembers(props.curKey);
        setValueList(res);
    };

    const addData = async () => {
        if (newValue == "") {
            return;
        }
        const exist = await props.client.setCommand().sismember(props.curKey, newValue);
        if (exist == 1) {
            message.warning("已经存在相同值");
            return;
        }
        await props.client.setCommand().sadd(props.curKey, [newValue]);
        const tmpList = valueList.slice();
        tmpList.unshift(newValue);
        setValueList(tmpList);
        setNewValue("");
        setShowAddModal(false);
        message.info("添加成功");
    };

    const removeData = async (value:string) => {
        await props.client.setCommand().srem(props.curKey,[value]);
        const tmpList = valueList.filter(item=>item != value);
        setValueList(tmpList);
    };

    useEffect(() => {
        loadData();
    }, []);

    return (
        <Card bordered={false} extra={
            <Button type="primary" onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setNewValue("");
                setShowAddModal(true);
            }}>添加值</Button>
        }>
            <List dataSource={valueList}
                style={{ height: "calc(100vh - 280px)", overflowY: "auto" }}
                renderItem={item => (
                    <List.Item key={item} extra={
                        <Button danger type="link" onClick={e=>{
                            e.stopPropagation();
                            e.preventDefault();
                            removeData(item);
                        }}>删除</Button>
                    }>{item}</List.Item>
                )} />
            {showAddModal == true && (
                <Modal open title="添加值"
                    okText="添加" okButtonProps={{ disabled: newValue == "" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowAddModal(false);
                    }}
                    onOk={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        addData();
                    }}>
                    <Form>
                        <Form.Item label="值">
                            <Input value={newValue} onChange={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setNewValue(e.target.value);
                            }} />
                        </Form.Item>
                    </Form>

                </Modal>
            )}
        </Card>
    );
}

export default SetValue;